.flex{display: -webkit-flex;display: flex;}

/* flex-direction 指定了弹性子元素在父容器中的位置 */
.flex-direction-row{-webkit-flex-direction: row;flex-direction: row;} /* 横向从左到右排列（左对齐），默认的排列方式 */
.flex-direction-rowReverse{-webkit-flex-direction: row-reverse;flex-direction: row-reverse;} /* 反转横向排列（右对齐，从后往前排，最后一项排在最前面 */
.flex-direction-column{-webkit-flex-direction: column;flex-direction: column;} /* 纵向排列 */
.flex-direction-columnReverse{-webkit-flex-direction: column-reverse;flex-direction: column-reverse;} /* 反转纵向排列，从后往前排，最后一项排在最上面 */

/* justify-content 弹性项沿着弹性容器的主轴线（main axis）对齐 */
.justify-content-flexStart{-webkit-justify-content: flex-start;justify-content: flex-start;} /* 左 弹性项目向行头紧挨着填充 没有空隙 */
.justify-content-flexEnd{-webkit-justify-content: flex-end;justify-content: flex-end;} /* 右 弹性项目向行尾紧挨着填充 没有空隙 */
.justify-content-center{-webkit-justify-content: center;justify-content: center;} /* 中 弹性项目居中紧挨着填充 没有空隙 */
.justify-content-between{-webkit-justify-content: space-between;justify-content: space-between;} /* 弹性项目平均分布在该行上 两端紧靠 */
.justify-content-around{-webkit-justify-content: space-around;justify-content: space-around;} /* 弹性项目平均分布在该行上，两边留有一半的间隔空间 */

/* align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式   每个子元素是一个单位 */
.align-items-stretch{-webkit-align-items: stretch;align-items: stretch;} /* 子元素同父元素高 */
.align-items-flexStart{-webkit-align-items: flex-start;align-items: flex-start;} /* 居顶 */
.align-items-flexEnd{-webkit-align-items: flex-end;align-items: flex-end;} /* 居底 */
.align-items-center{-webkit-align-items: center;align-items: center;} /* 居中 */
.align-items-baseline{-webkit-align-items: baseline;align-items: baseline;}

/* flex-wrap 换行方式 */
.flex-wrap-nowrap{-webkit-flex-wrap: nowrap;flex-wrap: nowrap;} /* 单行 不换行 */
.flex-wrap-wrap{-webkit-flex-wrap: wrap;flex-wrap: wrap;} /* 多行 超出换行 */
.flex-wrap-wrapReverse{-webkit-flex-wrap: wrap-reverse;flex-wrap: wrap-reverse;} /* 反转wrap排列 */

/* align-content 置各个行的对齐   所有子元素是一个单位 */
.align-content-stretch{-webkit-align-content: stretch;align-content: stretch;}
.align-content-flexStart{-webkit-align-content: flex-start;align-content: flex-start;} /* 上 */
.align-content-flexEnd{-webkit-align-content: flex-end;align-content: flex-end;} /* 下 */
.align-content-center{-webkit-align-content: center;align-content: center;} /* 中 */
.align-content-between{-webkit-align-content: space-between;align-content: space-between;} /* 上下 紧贴 平均分布 */
.align-content-around{-webkit-align-content: space-around;align-content: space-around;} /* 上下 有空隙 平均分布 */

/* align-self  子元素自身分布位置 */
.align-self-auto{-webkit-align-self: auto;align-self: auto;} /* 默认 */
.align-self-flexStart{-webkit-align-self: flex-start;align-self: flex-start;}
.align-self-flexEnd{-webkit-align-self: flex-end;align-self: flex-end;}
.align-self-center{-webkit-align-self: center;align-self: center;}
.align-self-baseline{-webkit-align-self: baseline;align-self: baseline;}
.align-self-stretch{-webkit-align-self: stretch;align-self: stretch;}

/* flex 属性用于指定弹性子元素如何分配空间 */

/* 横向 不考虑高度居中 */
.flexbox-row-between{display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;} /* 不换行 两端 */
.flexbox--row-center{display: -webkit-flex;display: flex;-webkit-justify-content: center;justify-content: center;} /* 不换行 中 */
.flexbox-row-left{display: -webkit-flex;display: flex;-webkit-justify-content: flex-start;justify-content: flex-start;-webkit-flex-wrap: wrap;flex-wrap: wrap;} /* 换行 左 */

/* 纵向 */
.flexbox-col-center{display: -webkit-flex;display: flex;-webkit-flex-direction: column;flex-direction: column;-webkit-justify-content: center;justify-content: center;} /* 所有子元素居中 */
.flexbox-col-bottom{display: -webkit-flex;display: flex;-webkit-flex-direction: column;flex-direction: column;-webkit-justify-content: flex-end;justify-content: flex-end;} /* 所有子元素居底 */

/* 横向 单行 多列 有高 */
.flexbox-center{display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center;align-items: center;} /* 子元素居中 */
.flexbox-z2{display: -webkit-flex;display: flex;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;} /* 子元素居底 */


.hid{overflow: hidden;}